<template>
<div class="layout">

	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'welisten-listener-apply'}" >倾听者申请列表</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>
	</Row>

	<Form ref="vform" :model="vform" :label-width="80" inline>
		<Row type="flex" :gutter="16">
			<Col :span=16>
				<FormItem label="昵称">
					<Input v-model="vform.nickname" placeholder="请填写昵称" readonly></Input>
				</FormItem>
				<FormItem label="锁号">
					<Input readonly v-model="vform.idno" readonly></Input>
				</FormItem>
				<FormItem label="手机号">
					<Input readonly v-model="vform.mobile" readonly></Input>
				</FormItem>
				<FormItem label="出生日期">
					<Input readonly v-model="vform.born_at" readonly></Input>
				</FormItem>
				<FormItem label="家庭状态">
					<Input readonly v-model="vform.family_status" readonly></Input>
				</FormItem>
				<FormItem label="学历">
					<Input readonly v-model="vform.education" readonly></Input>
				</FormItem>
				<FormItem label="城市">
					<Input readonly v-model="vform.city" readonly></Input>
				</FormItem>
				<FormItem label="职业">
					<Input readonly v-model="vform.occupation" readonly></Input>
				</FormItem>
				<FormItem label="个人简介" style="width:100%">
					<Input v-model="vform.experience" readonly :autosize="{minRows: 2,maxRows: 5}"></Input>
				</FormItem>
				<FormItem label="擅长话题" style="width:100%">
					<Tag v-for="(item,index) in vform.tag" :key="index" type="border"  color="success">{{item}}</Tag>
				</FormItem>
				<FormItem label="擅长诉求" style="width:100%">
					<Tag v-for="(item,index) in vform.tag2" :key="index" type="border"  color="success">{{item}}</Tag>
				</FormItem>
				<FormItem label="个性化标签" style="width:100%">
					<Tag v-for="(item,index) in vform.tag3" :key="index" type="border"  color="success">{{item}}</Tag>
				</FormItem>
				<FormItem label="拒绝原因" style="width:100%">
					<Input v-model="vform.refuse_reason"  :autosize="{minRows: 2,maxRows: 5}"></Input>
				</FormItem>
			</Col>
			<Col :span=8>
				<Card >
					<p slot="title">
						<Icon type="ios-film-outline"></Icon>
						控制菜单
					</p>
					<div>
						<FormItem label="头像">
							<div class="camera-wrapper" v-if="vform.avatar!=''">
								<img :src="vform.avatar" />
								<div class="list-cover">
									<Icon type="ios-eye-outline" @click.native="onView(vform.avatar)"></Icon>
									<Icon type="ios-trash-outline" @click.native="onRemove(vform.avatar)"></Icon>
								</div>
							</div>
							<Button v-if="vform.avatar==''" class="btn-camera" type="text" @click="showPictureBox=!showPictureBox">
								<Icon type="ios-camera" size="20"></Icon>
							</Button>
						</FormItem>
						<FormItem label="状态">
							<Tag :color="getStatusColor(vform.status)">{{statusList[vform.status-1]}}</Tag>
						</FormItem>
						<div class="cleaner"></div>
						<FormItem label="性别">
							<Select v-model="vform.sex" placeholder="请选择" :label-in-value="true" >
								<Option value=0 >保密</Option>
								<Option value=1 >男</Option>
								<Option value=2 >女</Option>
							</Select>
						</FormItem>
						<FormItem label="年龄">
							<InputNumber :max="9999" :min="18" :step="1" v-model="vform.age" readonly></InputNumber>
						</FormItem>
						<div class="cleaner"></div>
						<FormItem label="提交时间">
							<span>{{vform.created_at}}</span>
						</FormItem>
						<div class="cleaner"></div>
						<FormItem label="编辑时间">
							<span>{{vform.updated_at}}</span>
						</FormItem>
						<div class="cleaner"></div>
						<FormItem label="审核时间">
							<span>{{vform.verify_time}}</span>
						</FormItem>
						<div class="cleaner"></div>
						<Button type="info" @click="onPass($route.params.id)" v-if="1==vform.status">通过</Button>
						<Button type="error" ghost @click="onRefuse($route.params.id,3)" v-if="1==vform.status">拒绝</Button>
					</div>
				</Card>
			</Col>
		</Row>
	</Form>


    <Modal title="查看图片" v-model="currentImagvisible">
        <img :src="currentImag" v-if="currentImagvisible" style="width: 100%">
    </Modal>
</div>
</template>
<script>

// 引入子组件
import PictureSelector from '@/components/PictureSelector/PictureSelector.vue'
import TagSelector from '@/components/TagSelector/TagSelector.vue'
import ChinaAddressV4Data from '@/../static/js/china_address_v4.json'
import OccupationV1Data from '@/../static/js/occupation.json'

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'

// quill编辑器的字体
var fonts = ['SimSun', 'Microsoft-YaHei','Arial','Times-New-Roman','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);


import {mapState,mapGetters} from 'vuex'
import {Cascader, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default {
	name:'welisten-listener-edit',
	components: {TagSelector, PictureSelector, Cascader, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'申请详情',
			showTagBox:false,
			showPictureBox:false,
			currentImag:'',
			currentImagvisible:false,
			vcity:[],
			voccupation:[],
			chinadata: ChinaAddressV4Data,
			occupationdata: OccupationV1Data,
			editorIndex:0,
			editorOption:{
				placeholder:'请输入内容',
				modules:{
					imageResize: {},
					toolbar:{
                        container: [
							['bold', 'italic', 'underline', 'strike'],        // toggled buttons
							['blockquote', 'code-block'],           // custom button values
							[{ 'list': 'ordered'}, { 'list': 'bullet' }],
							[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
							[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
							['link'],
							[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
							[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

							[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
							[{ 'font': fonts }],
							[{ 'align': [] }],
							['clean'],
                        ],
                    },
					syntax: {highlight:text => hljs.highlightAuto(text).value},


				}
			},
			vform:{tag99:[]},
			statusList: ['审核中','已通过','已拒绝'],

		}
	},
	methods:{
		init:function(){
			let self=this

			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/welisten/applies/"+self.$route.params.id,{params: { 'token': self.token }})}

			self.$http.all([action1()])
			.then(self.$http.spread(function (response1){			console.log(response1)
				if(200==response1.data.status && 0==response1.data.code)
				{
                    response1.data.data.tag = response1.data.data.tag.split(",")
                    response1.data.data.tag2 = response1.data.data.tag2.split(",")
                    response1.data.data.tag3 = response1.data.data.tag3.split(",")
					self.vform=response1.data.data
					self.vcity=[self.vform.city]
					self.voccupation=[self.vform.occupation]
				}else{self.$Message.error(response1.data.message)}

				self.$store.dispatch("setSpinShow",false)
			})).catch(self.$http.spread(function (error1) {
				self.$store.dispatch("setSpinShow",false)
			}))
		},

        onPass:function(id){
            let self=this
            this.$Modal.confirm({
                title: '温馨提示',
                content: '确认通过审核吗？',
                onOk: () => {
                    self.$http.post("/v1/welisten/applies?_method=put&token="+self.token,{'id':id,'data':'{"status":"1"}'})
                        .then(function(response){
                            if(200==response.data.status && 0==response.data.code)
                            {
                                self.vform.status= 2
                                self.$Message.success('操作成功');
                            }else{
                                self.$Message.error(response.data.message);
                            }
                        }).catch(function(error){
                        self.$Message.error( error.message);
                    })
                },
            })
		},
        onRefuse:function(id){
            let self=this
		    if(self.vform.refuse_reason==''){
                self.$Message.error('请填写拒绝原因')
				return
			}
            this.$Modal.confirm({
                title: '温馨提示',
                content: '确认拒绝通过吗？',
                onOk: () => {
                    self.$http.post("/v1/welisten/applies?_method=put&token="+self.token,{'id':id,'data':'{"status":"2","refuse_reason":"'+self.vform.refuse_reason+'"}'})
                        .then(function(response){
                            if(200==response.data.status && 0==response.data.code)
                            {
                                self.vform.status= 3
                                self.$Message.success('操作成功');
                            }else{
                                self.$Message.error(response.data.message);
                            }
                        }).catch(function(error){
                        self.$Message.error( error.message);
                    })
                },
            })
		},
		deleteComment:function(uid,statusId){
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					this.changeStatus(uid,statusId)
				},
			})
		},
		save:function(){
			let self=this
			self.vform.tag=self.vform.tag99.toString()
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/listeners?_method=put&token="+self.token,{'id':self.$route.params.id,'data':JSON.stringify(self.vform)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功');
				}else{

					self.$Message.error(response.data.message);
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message);
				self.$store.dispatch("setSpinShow",false)
			})
		},
		getStatusColor(status){
			if(3==status){return 'error'}
			else if(2==status){return 'success'}
			return 'default'
		},
		onCity:function(value, selectedData){
			this.vform.city=selectedData[0].label
		},
		onOccupation:function(value, selectedData){
			this.vform.occupation=selectedData[0].label
		},
		insertTag:function(val){
			if(this.vform.tag99.indexOf(val)<0){this.vform.tag99.push(val)}
			this.showTagBox=false
		},
		OnTagClose:function(index){
			this.vform.tag99.splice(index,1)
		},
		insertImage:function(url){
			this.vform.avatar=url
			this.showPictureBox=false

		},
		onRemove:function(index){this.vform.avatar=''},
		onView:function(url){
			this.currentImag=url
			this.currentImagvisible=true
		}
	},
	created:function(){
	},
	mounted () {
    	this.setTitle(this.title)
	},
	activated:function(){
		this.init()
	},
	computed:{
		...mapGetters(['token','menuData'])

	},
}



</script>
<style lang="less" scoped>

.camera-wrapper{
	display: inline-block;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border: 1px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	position: relative;
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	margin-right: 4px;

	img{width: 100%;height: 100%;}
	.list-cover{
		display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
		background: rgba(0,0,0,.6);
		i{
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			margin: 0 2px;
		}
	}
}
.camera-wrapper:hover .list-cover{display: block;}

.btn-camera,.btn-add{border:1px dashed #dcdee2;width:58px;height:58px;vertical-align: text-bottom;}
.btn-camera:hover,.btn-add:hover{border:1px dashed #5cadff;}
.btn-add{width:24px;height:24px;vertical-align:middle;
	i{position: relative;
    font-size: 16px;
    left: -7px;
    top: -3px;}
}
</style>
